<template>
  <div class="taskDetail" id="taskDetail">
    <!-- 表格展示部分 -->
    <baseTable :columns="columns.contentIndexTaskDetailColumns" :dataSource="configData.records"
      :showCheckDelete="showCheckDelete" :isSelect="true" ref="taskDetailTables" :scroll="scroll"
      :isShowPagination="isShowPagination" :total="configData.total" @changePage="changePage">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a class="eidtRecords" @click="reCreateIndex(record)">{{
            record.oparation[0]
          }}</a>
        </template>
      </template>
      <template #otherOpration>
        <a-button :style="{ 'margin-left': '8px' }" @click="reCreateIndexs"
          :disabled="!rowSelection.length">重新生成索引</a-button>
      </template>
    </baseTable>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, computed } from "vue"
import baseTable from "@/components/table/baseTable.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import columns from "@/components/table/tableConfig/columnsName";
import tableToolTip from "@/components/table/tableToolTip.vue";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { scrollType, modeProp } from "@/type.d";
// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}

//data
const router = useRouter();
const route = useRoute();
const showCheckDelete = true;
const reCreateArr = ref<(string | number)[]>([]);
const taskDetailTables = ref<any>(null);
let rowSelection = ref<(string | number)[]>([]);
let scroll: scrollType = reactive({ y: "", isFixed: false });
const isShowPagination = true;
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
let datas = reactive<dataSourceType>({})
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });

// computed
rowSelection = computed(() => {
  return taskDetailTables.value.selectedRowKeys;
});

// method
// 获取内容索引表格数据
const getRdecord = async () => {
  const data: {} = {
    taskId: route.query.taskId,
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
  };
  const telData = (await request.contentIndexTaskFailRecordPage(data)) || {};
  let reqData = telData;
  let taskDetailData = reactive({});
  const records: any[] = [];
  reqData?.records?.map((item: any, index: number) => {
    taskDetailData = {
      channelId: item.channelId,
      oparation: ["生成索引"],
      num: index + 1,
      indexTime: item.createTime,
      publishTime: item.publishTime,
      siteName: item.siteName,
      title: item.title,
      errMsg: item.errMsg,
      channelName: item.channelName,
      contentId: item.contentId,
      taskId: item.taskId,
      id: item.id,
    };
    records.push(taskDetailData);
  });
  configData.total = reqData.total;
  configData.size = reqData.size;
  configData.records = records;

  nextTick(() => {
    scroll.y = getTableScroll(74, "taskDetail").y;
    scroll.isFixed = getTableScroll(74, "taskDetail").isFixed;
  });
};


//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  datas = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getRdecord();
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
};


// 删除单个内容
const reCreateIndex = async (item: any) => {
  reCreateArr.value = [item.id];
  recreateRecords(reCreateArr.value);
};

//删除已选所有内容
const reCreateIndexs = () => {
  let keys = rowSelection.value;
  recreateRecords(keys);

};

// 调接口删除内容
const recreateRecords = async (keys: (string | number)[] = []) => {
  await request.contentIndexTaskFailRecordIndex({ taskId: route.query.taskId, ids: keys }).then((res: any) => {
    if (res.code == "00000 00000") {
      getRdecord();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  });
};
//onmounted
onMounted(() => {
  getRdecord();
});
</script>

<style lang="less" scoped>
.taskDetail {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;

  ::v-deep(.ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
  }
}

:deep(.ant-form-item) {
  width: 604px;
  display: flex;

  .ant-form-item-control {
    width: 494px;
    margin-left: 4px;
    flex: unset;
  }

  .ant-form-item-label {
    flex-grow: 0;
    width: 94px;
    text-align: right;
  }
}



::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }
}
</style>